<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="title">
        Home page    
    </ui:define>

    <ui:define name="col1">
        <script type="text/javascript"> Cufon.now(); </script>
        <script type="text/javascript">
            $(window).load(function() {
                $('#slider').nivoSlider({
                    effect:'sliceUpDown', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
                    slices:17,
                    animSpeed:500,
                    pauseTime:6000,
                    startSlide:0, //Set starting Slide (0 index)
                    directionNav:false, //Next and Prev
                    directionNavHide:false, //Only show on hover
                    controlNav:true, //1,2,3...
                    controlNavThumbs:false, //Use thumbnails for Control Nav
                    controlNavThumbsFromRel:false, //Use image rel for thumbs
                    controlNavThumbsSearch: '.jpg', //Replace this with...
                    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                    keyboardNav:true, //Use left and right arrows
                    pauseOnHover:true, //Stop animation while hovering
                    manualAdvance:false, //Force manual transitions
                    captionOpacity:1, //Universal caption opacity
                    beforeChange: function(){$('.nivo-caption').animate({bottom:'-110'},400,'easeInBack')},
                    afterChange: function(){Cufon.refresh();$('.nivo-caption').animate({bottom:'-20'},400,'easeOutBack')},
                    slideshowEnd: function(){} //Triggers after all slides have been shown
                });
                Cufon.refresh();
            });
        </script>
        <div id="slider">
            <img src="./resources/images/img1.jpg" alt="" title="&lt;strong&gt;Villa Neverland, 2006&lt;/strong&gt;&lt;span&gt;9 rooms, 3 baths, 6 beds, building size: 5000 sq. ft. &nbsp; &nbsp; &nbsp; Price: $ 600 000 &nbsp; &nbsp; &nbsp; &lt;a href='#'&gt;Read more&lt;/a&gt;&lt;/span&gt;" />
            <img src="./resources/images/img2.jpg" alt="" title="&lt;strong&gt;Villa Lipsum, 2008&lt;/strong&gt;&lt;span&gt;8 rooms, 4 baths, 4 beds, building size: 4500 sq. ft. &nbsp; &nbsp; &nbsp; Price: $ 500 000 &nbsp; &nbsp; &nbsp; &lt;a href='#'&gt;Read more&lt;/a&gt;&lt;/span&gt;"/>
            <img src="./resources/images/img3.jpg" alt="" title="&lt;strong&gt;Villa Dolor Sid, 2007&lt;/strong&gt;&lt;span&gt;11 rooms, 3 baths, 5 beds, building size: 6000 sq. ft. &nbsp; &nbsp; &nbsp; Price: $ 650 000 &nbsp; &nbsp; &nbsp; &lt;a href='#'&gt;Read more&lt;/a&gt;&lt;/span&gt;"/>
            <img src="./resources/images/img4.jpg" alt="" title="&lt;strong&gt;Villa Dolor Sid, 2007&lt;/strong&gt;&lt;span&gt;11 rooms, 3 baths, 5 beds, building size: 6000 sq. ft. &nbsp; &nbsp; &nbsp; Price: $ 650 000 &nbsp; &nbsp; &nbsp; &lt;a href='#'&gt;Read more&lt;/a&gt;&lt;/span&gt;"/>
            <img src="./resources/images/img5.jpg" alt="" title="&lt;strong&gt;Villa Dolor Sid, 2007&lt;/strong&gt;&lt;span&gt;11 rooms, 3 baths, 5 beds, building size: 6000 sq. ft. &nbsp; &nbsp; &nbsp; Price: $ 650 000 &nbsp; &nbsp; &nbsp; &lt;a href='#'&gt;Read more&lt;/a&gt;&lt;/span&gt;"/>            
        </div>
    </ui:define>

    <ui:define name="col1_2">
        <div class="pad_left1">
            <h2 class="pad_bot1">Buyers. Sellers. Proprietors. Agents.</h2>
            <div class="wrapper">
                <article class="cols">
                    <h4 class="img1">Selling</h4>
                    <p class="pad_bot1"><strong class="color1">Welcome one of <br/>
                            <a href="http://blog.mysweethome.com/free-website-templates/" target="_blank">My Sweet Home</a></strong></p>
                    <p class="pad_bot2">
                        created by My Sweet Home team, optimized for 1024X768 px.</p>
                    <a href="#" class="button">Read more</a>
                </article>
                <article class="cols pad_left1">
                    <h4 class="img2">Investing</h4>
                    <p class="pad_bot1"><strong class="color1"><a href="http://blog.mysweethome.com/" target="_blank" rel="nofollow">My Sweet Home</a> for<br/>
                            Real Estate business</strong></p>
                    <p class="pad_bot2">
                        goes with PSD source files and without them.</p>
                    <a href="#" class="button">Read more</a>
                </article>
                <article class="cols pad_left1">
                    <h4 class="img3">Renting</h4>
                    <p class="pad_bot1"><strong class="color1">Template has several pages</strong></p>
                    <p class="pad_bot2">
                        <a href="index.html" class="color2">Main</a>, <a href="Buying.html" class="color2">Buying</a>, <a href="Selling.html" class="color2">Selling</a>, <a href="Renting.html" class="color2">Renting</a>, <a href="Finance.html" class="color2">Finance</a>, <a href="Contacts.html" class="color2">Contacts</a> (note that contact us form – doesn’t work).</p>
                    <a href="#" class="button">Read more</a>
                </article>
            </div>
        </div>
    </ui:define>

    <ui:define name="col2_2">
        <div class="pad1">
            <h3>Special Offers</h3>
            <ul class="list1">
                <li><a href="#">Home Loan Offer</a></li>
                <li><a href="#">Free Calculators</a></li>
                <li><a href="#">Free Loan Tools</a></li>
                <li><a href="#">Value Your Home</a></li>
                <li><a href="#">Recently Sold Properties</a></li>
                <li><a href="#">Suburb Statistics</a></li>
                <li><a href="#">Compare Property Prices</a></li>
            </ul>
        </div>
    </ui:define>

    <ui:define name="body3">
        <div class="main">
            <section id="content2">
                <div class="wrapper">
                    <article class="col1">
                        <div class="pad2">
                            <h2>Selling Estate</h2>
                            <div class="wrapper pad_bot3">
                                <figure class="left marg_right1"><img src="./resources/images/page1_img4.jpg" alt=""/></figure>
                                <p class="pad_bot1"><strong class="color2">2006, 3 baths, 6 beds, building size: 5000 sq. ft.<br/>
                                        Price: <span class="color1">$ 600 000</span></strong></p>
                                <p class="pad_bot2">
                                    Massa dictum ementum velitumo od consequat ante oremsumas ame consectetueraipiscing eliteli ueedlorAliquam conguen nisauris accusalla vel deinol tincidunt ligula magna semper ipsum.</p>
                                <a href="#" class="button">Read more</a>
                            </div>
                            <div class="wrapper">
                                <figure class="left marg_right1"><img src="./resources/images/page1_img5.jpg" alt=""/></figure>
                                <p class="pad_bot1"><strong class="color2">2006, 3 baths, 6 beds, building size: 5000 sq. ft.<br/>
                                        Price: <span class="color1">$ 600 000</span></strong></p>
                                <p class="pad_bot2">
                                    Massa dictum ementum velitumo od consequat ante oremsumas ame consectetueraipiscing eliteli ueedlorAliquam conguen nisauris accusalla vel deinol tincidunt ligula magna semper ipsum.</p>
                                <a href="#" class="button">Read more</a>
                            </div>

                        </div>
                    </article>
                    <article class="col2">
                        <div class="pad1">
                            <h3>Recent News</h3>
                            <div class="wrapper">
                                <span class="date"><strong>28</strong><span>may</span></span>
                                <p><a href="#" class="color2">Donec consequat risus</a><br/>
                                    Hendrerit conghdim entum diam metus fringilla nisl, in porta sapien purus quis odiosem... <a href="#">more</a></p>
                            </div>
                            <div class="wrapper">
                                <span class="date"><strong>25</strong><span>may</span></span>
                                <p><a href="#" class="color2">Nullam dignissim</a><br/>
                                    Laoreet neque, quis sollicitudin orci tempus etiam viverra leo euismod pulvinar accumsan...   <a href="#">more</a></p>
                            </div>
                            <div class="wrapper">
                                <span class="date"><strong>22</strong><span>may</span></span>
                                <p><a href="#" class="color2">Quisque nunc lorem</a><br/>
                                    Feugiat nec sodales quis, iaculis sed libero. Cras vel nisl justo, ac posuere est nulla facilisi... <a href="#">more</a></p>
                            </div>
                        </div>
                    </article>
                </div>
            </section>
        </div>
    </ui:define>

</ui:composition>

